<template>
	<view>
		<view class="u-page">
			<view class="flex-col flex-auto group">
				<view class="flex-col section">
					<view class="flex-col group_2 space-y-59">
						<text class="self-center text">经营数据</text>
						<u-select v-model="show" :list="shopList" @confirm="confirm"></u-select>
						<view class="flex-row justify-between items-center" @click="show = true">
							<text class="text_2">{{shop_name?shop_name:'请选择店铺'}}</text>
							<view class="flex-row group_3 space-x-7">
								<text class="text_3">切换门店</text>
								<image class="shrink-0 image"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png" />
							</view>
						</view>
					</view>
					<view class="flex-col justify-start section_2">
						<view class="section_3"></view>
					</view>
				</view>
				<view class="flex-col relative group_4 space-y-21">
					<view class="flex-col section_4">
						<view class="shrink-0 section_5"></view>
						<view class="flex-row justify-between items-center relative group_5">
							<text class="font_1">经营统计</text>
							<view class="flex-col justify-start items-center text-wrapper" @click="more">
								<text class="font_2 text_4">查看更多</text>
							</view>
						</view>
						<view class="flex-row items-center section_6">
							<u-subsection :list="Timelist" :current="1" width="300px" @change="sectionChange">
							</u-subsection>
						</view>
						<text class="self-center font_1 text_7">总营业额（元）</text>
						<text class="self-center text_8">{{InfoList.syncmoney}}</text>
						<image class="shrink-0 self-center image_2"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650820555435.png" />
						<view class="flex-row equal-division space-x-18">
							<view class="flex-col items-center equal-division-item group_6 space-y-29">
								<text class="font_2">实际入账（元）</text>
								<text class="font_3">{{InfoList.paymoney}}</text>
							</view>
							<view class="flex-col items-center equal-division-item group_7 space-y-29">
								<text class="font_2">订单数量（个）</text>
								<text class="font_3">{{InfoList.orderNum}}</text>
							</view>
						</view>
					</view>
					<view class="grid">
						<view class="flex-col grid-item space-y-35">
							<view class="flex-row items-center space-x-11">
								<image class="image_3"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650899416388.png" />
								<text class="font_4">到店访客</text>
							</view>
							<view class="flex-row justify-center items-baseline relative group_8">
								<view><text class="font_5 pos">{{InfoList.ddUsers}}</text></view>
								<view><text class="font_6">（新{{InfoList.newDdUsers}}/老{{InfoList.oldDdUsers}}）</text></view>
							</view>
						</view>
						<view class="flex-col grid-item_2 space-y-35">
							<view class="flex-row items-center space-x-7">
								<image class="image_3"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650957483672.png" />
								<text class="font_4 text_9">用户</text>
							</view>
							<view class="flex-row justify-center items-baseline relative group_9">
								<view><text class="font_5 text_10 pos_2">{{InfoList.users}}</text></view>
								<view><text class="font_6">（新{{InfoList.oldUsers}}/老{{InfoList.oldUsers}}）</text></view>
							</view>
						</view>
						<view class="flex-col grid-item space-y-36">
							<view class="flex-row">
								<image class="image_3"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400651026514942.png" />
								<text class="font_4 text_11">新增会员</text>
							</view>
							<view class="flex-row items-baseline relative group_9">
								<text class="font_5 text_13">{{InfoList.newMemberUser}}</text>
								<text class="font_6">（充值{{InfoList.rechargeMoney}}）</text>
							</view>
						</view>
						<view class="flex-col grid-item_3 space-y-34">
							<view class="flex-row items-center group_10 space-x-9">
								<image class="image_3"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400651101803073.png" />
								<text class="font_4 text_12">时长</text>
							</view>
							<view class="self-start">
								<text class="font_5" style="font-size: 40rpx;">{{countdown(InfoList.long)}}</text>
								<!-- <text class="font_6">小时</text>
								<text class="font_5">3</text>
								<text class="font_6">分钟</text> -->
							</view>
						</view>
					</view>
					<view class="flex-col section_7">
						<view class="flex-col items-start group_10 space-y-31">
							<text class="font_7 text_14">营销功能</text>
							<view class="flex-row">
								<view class="flex-col items-center equal-division-item_2 space-y-18"
									@click="rechargeList">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/99aa057d9273f135306db094006553ea.png" />
									<text class="font_2">充值记录</text>
								</view>
								<view class="flex-col items-center equal-division-item_2 space-y-18"
									@click="cardConfig">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/0bde164cd3fac71fffe27a5101ca639b.png" />
									<text class="font_2">卡券配置</text>
								</view>
								<view class="flex-col items-center equal-division-item_2 space-y-18"
									@click="rechargeAdmin">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400658673355160.png" />
									<text class="font_2">充值管理</text>
								</view>
								<view class="flex-col items-center equal-division-item_2 space-y-18" @click="cardList">
									<image class="image_4" src="https://gongxiangtaiqiu.axa2.com/taiqiu/quanlist.png" />
									<text class="font_2">卡券列表</text>
								</view>
							</view>
						</view>
						<view class="flex-col group_11">
							<text class="self-start font_7 text_15">经营统计</text>
							<view class="grid_2">
								<view class="flex-col items-center grid-item_4 space-y-16" @click="datacoverage">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/3a07cc6d1d3a2a41b2b6f742398a6599.png" />
									<text class="font_2">数据总览</text>
								</view>
								<view class="flex-col items-center grid-item_4 space-y-16" @click="datacoverage">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/e2d60554d689d0f413b427afe95c6126.png" />
									<text class="font_2">基础报表</text>
								</view>
								<view class="flex-col items-center grid-item_4 space-y-16" @click="arpuAnalyst">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400661001707968.png" />
									<text class="font_2">用户消费分析</text>
								</view>
								<view class="flex-col items-center grid-item_4 space-y-16" @click="businessAnalysis">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400661936587155.png" />
									<text class="font_2">经营分析</text>
								</view>
								<view class="flex-col items-center grid-item_4 space-y-16" @click="rechargeStatistics">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/aa5275e07f91685ea9b9e3716f82b84a.png" />
									<text class="font_2">充值统计</text>
								</view>
								<view class="flex-col items-center grid-item_4 space-y-16" @click="ordeDuration">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/c3535d86e73feb699ddefdfc2143e5ef.png" />
									<text class="font_2">订单时长分析</text>
								</view>
							</view>
							<text class="self-start font_7 text_16">门店管理</text>
							<view class="flex-row equal-division_2">
								<view class="flex-col items-center equal-division-item group_12 space-y-18"
									@click="storeManage">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/64a2e05b243c4cbd3464ea5edd1d60fe.png" />
									<text class="font_2">门店管理</text>
								</view>
								<view class="flex-col items-center equal-division-item group_13 space-y-18"
									@click="rule">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/9dfd3223e70d2bb751fb737013b98cbd.png" />
									<text class="font_2">收费规则</text>
								</view>
								<view class="flex-col items-center equal-division-item group_14 space-y-18"
									@click="vipadmin">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400663271274669.png" />
									<text class="font_2">会员管理</text>
								</view>
								<view class="flex-col items-center equal-division-item group_15 space-y-18"
									@click="guestlist">
									<image class="image_4"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400663520024039.png" />
									<text class="font_2">访客列表</text>
								</view>
							</view>
						</view>
						<view class="flex-col group_16 space-y-35">
							<text class="self-start font_1 text_17">设备管理</text>
							<view class="flex-row">
								<view class="flex-col items-center equal-division-item_3 space-y-12"
									@click="tableAdmin">
									<image class="image_5"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/1908d685d8a5c9fe081b405236e18c1a.png" />
									<text class="font_2">桌台管理</text>
								</view>
								<view class="flex-col items-center equal-division-item_3 space-y-12" @click="monitor">
									<image class="image_5"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/1b837c9076f135788590fed63fbffdda.png" />
									<text class="font_2">公共设备</text>
								</view>
								<view class="flex-col items-center equal-division-item_3 space-y-12" @click="monitor">
									<image class="image_6"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/2aabdb3ebabd247157072dd07137d0dc.png" />
									<text class="font_2">存杆柜</text>
								</view>
								<view class="flex-col items-center equal-division-item_3 space-y-12" @click="monitor">
									<image class="image_5"
										src="https://gongxiangtaiqiu.axa2.com/taiqiu/1616821df7b934250b98360550a40cfe.png" />
									<text class="font_2">监控</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home.png",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban.png",
						text: '看板',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_tabbar.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				background: '#19c865',
				show: false,
				shopList: {},
				InfoList: {},
				shop_name: '',
				shop_id:'',
				// shop_name:'',
				Timelist: [{
						name: '今日'
					},
					{
						name: '昨日'
					},
					{
						name: '本周'
					},
					{
						name: '本月'
					}
				],
				current: 1
			};
		},
		created() {
			if (this.shop_name == '') {
				uni.showToast({
					icon: 'none',
					title: '请先选择店铺哦 ~'
				})
			}
			this.Info()
			this.shop()
		},
		methods: {
			// 查看更多跳转
			more(){
				console.log('1q22122')
				uni.navigateTo({
					url:'/pagesB/more/more'
				})
			},
			// 时间转化
			// countdown1(time) {
			// 	const that = this
			// 	let day = parseInt(time / 60 / 60 / 24)
			// 	let hr = parseInt(time / 60 / 60 % 24)
			// 	let min = parseInt(time / 60 % 60)
			// 	let sec = parseInt(time % 60)
			// 	day = day > 9 ? day : '0' + day
			// 	hr = hr > 9 ? hr : '0' + hr
			// 	min = min > 9 ? min : '0' + min
			// 	sec = sec > 9 ? sec : '0' + sec
			// 	let newhr = parseInt(hr) + parseInt(day * 24)
			// 	return `${hr}小时${min}分`
			// },
			
			countdown(seconds) {
			    var hours = Math.floor(seconds / (60 * 60)); // 将秒数除以3600得到小时部分
			    seconds %= 3600; // 取余数得到不足1小时的秒数
			    
			    var minutes = Math.floor(seconds / 60); // 将不足1小时的秒数除以60得到分钟部分
			    seconds %= 60; // 取余数得到不足1分钟的秒数
			    return `${hours}小时${minutes}分`
			    // return [hours, minutes];
			},
			//充值管理
			rechargeAdmin() {
				uni.navigateTo({
					url: '/pagesB/rechargeAdmin/rechargeAdmin'
				})
			},
			//卡券列表
			cardList() {
				uni.navigateTo({
					url: '/pagesB/cardList/cardList'
				})
			},
			//分段器
			sectionChange(index) {
				this.current = index;
				this.Info()
				console.log(this.current, '看看')
			},
			//店铺选择
			confirm(e) {
				this.shop_name = e[0].label
				this.shop_id = e[0].value
				// uni.setStorageSync('shop_id', this.shop_id);
				uni.setStorageSync('Bshop_id', this.shop_id);
				uni.setStorageSync('Bshop_name', this.shop_name);
				this.Info()
				console.log(this.shop_id, this.shop_name);
			},
			// 首页信息
			Info() {
				this.$Api.manageData({
					type: this.current, //1今日  2昨日 3本周  4上月
					shopId: uni.getStorageSync('Bshop_id'),
					// shopId: uni.getStorageSync('shop_id'),
					// shopId: 68,
				}).then(res => {
					this.InfoList = res.data.data
					console.log(res.data.data, '12121212')
				});
			},
			// 商家店铺列表
			shop() {
				this.$Api.getMyShop({
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					console.log(res.data.data, '12121212')
					let arr = res.data.data
					this.shopList = arr.map(item => {
						return {
							label: item.f_shop_name,
							value: item.id
						}
					})
					console.log(this.shopList)
				});
			},
			//经营分析
			businessAnalysis() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '暂未开放...'
				// })
				uni.navigateTo({
					url: '/pagesB/businessAnalysis/businessAnalysis'
				})
			},
			//充值记录
			rechargeList() {
				uni.navigateTo({
					url: '/pagesB/rechargeList/rechargeList'
				})
			},
			//规则
			rule() {
				uni.navigateTo({
					url: '/pagesB/chargeRule/chargeRule'
				})
			},
			//桌台管理
			tableAdmin() {
				uni.navigateTo({
					url: '/pagesB/tableAdmin/tableAdmin'
				})
			},
			//订单时长分析
			ordeDuration() {
				// uni.navigateTo({
				// 	url: '/pagesB/ordeDuration/ordeDuration'
				// })
				uni.showToast({
					icon: 'none',
					title: '暂未开放...'
				})
			},
			//用户消费分析
			arpuAnalyst() {
				// uni.navigateTo({
				// 	url: '/pagesB/arpuAnalyst/arpuAnalyst'
				// })
				uni.showToast({
					icon: 'none',
					title: '暂未开放...'
				})
			},
			//充值统计
			rechargeStatistics() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放...'
				})
				// uni.navigateTo({
				// 	url: '/pagesB/rechargeStatistics/rechargeStatistics'
				// })
			},
			//卡券配置
			cardConfig() {
				uni.navigateTo({
					url: '/pagesB/cardConfig/cardConfig'
				})
			},
			// 监控
			monitor() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放...'
				})
				// uni.navigateTo({
				// 	url: '/pagesB/monitor/monitor'
				// })
			},
			// 门店管理
			storeManage() {
				uni.navigateTo({
					url: '/pagesB/storeManage/storeManage'
				})
			},
			// 访客列表
			guestlist() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '暂未开放...'
				// })
				uni.navigateTo({
					url: '/pagesB/guestList/guestList'
				})
			},
			// 会员管理
			vipadmin() {
				uni.navigateTo({
					url: '/pagesB/visitorAdmin/visitorAdmin'
				})
			},
			// 数据总览
			datacoverage() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '暂未开放...'
				// })
				uni.navigateTo({
					url: '/pagesB/datacoverage/datacoverage'
				})
			}
		},
	};
</script>

<style lang="scss">
	/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	page {
		background-color: #eeeeee;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	::v-deep .u-subsection {
		width: 300px;
	}

	::v-deep .u-item-bg data-v-244377f2 {
		border-radius: 40px;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.group {
		padding-bottom: 22rpx;
		overflow-y: auto;
	}

	.section {
		padding: 105rpx 0 432rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.group_2 {
		padding: 0 29rpx;
	}

	.space-y-59>view:not(:first-child),
	.space-y-59>text:not(:first-child),
	.space-y-59>image:not(:first-child) {
		margin-top: 59rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.group_3 {
		margin-right: 4rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.image {
		width: 24rpx;
		height: 22rpx;
	}

	.section_2 {
		margin: 30rpx 20rpx 0 16rpx;
		padding: 9rpx 0;
		border-radius: 15rpx;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650678877155.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_3 {
		margin: 0 7rpx;
		background-image: linear-gradient(0deg, #19c865 0%, #8ef7bc 100%);
		border-radius: 8rpx;
		height: 16rpx;
	}

	.group_4 {
		margin-top: -448rpx;
		padding: 0 30rpx;
	}

	.space-y-21>view:not(:first-child),
	.space-y-21>text:not(:first-child),
	.space-y-21>image:not(:first-child) {
		margin-top: 21rpx;
	}

	.section_4 {
		padding-bottom: 44rpx;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650756797225.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 614rpx;
	}

	.section_5 {
		background-image: linear-gradient(0deg, #ffffff 0%, #dbffea 100%);
		height: 58rpx;
	}

	.group_5 {
		margin-top: -18rpx;
		padding-left: 31rpx;
		padding-bottom: 24rpx;
	}

	.font_1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 700;
		color: #222222;
	}

	.text-wrapper {
		padding: 18rpx 0;
		background-color: #ffa229;
		border-radius: 30rpx 0px 0px 30rpx;
		width: 158rpx;
		height: 60rpx;
		border: solid 1rpx #ff9d1d;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_4 {
		color: #ffffff;
	}

	.section_6 {
		margin: 0 20rpx;
		padding: 2rpx 54rpx 2rpx 33rpx;
		background-color: #efefef;
		border-radius: 32rpx;
	}

	.text-wrapper_2 {
		margin-left: 55rpx;
		padding: 18rpx 0;
		background-color: #ffffff;
		box-shadow: 0px 0px 18rpx #e0e0e091;
		border-radius: 30rpx;
		width: 162rpx;
		height: 60rpx;
	}

	.text_5 {
		margin-left: 57rpx;
	}

	.text_6 {
		margin-left: 114rpx;
	}

	.text_7 {
		margin-top: 49rpx;
	}

	.text_8 {
		margin-top: 37rpx;
		color: #222222;
		font-size: 72rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 72rpx;
	}

	.image_2 {
		margin-top: 47rpx;
		width: 589rpx;
		height: 2rpx;
	}

	.equal-division {
		margin-top: 37rpx;
	}

	.space-x-18>view:not(:first-child),
	.space-x-18>text:not(:first-child),
	.space-x-18>image:not(:first-child) {
		margin-left: 18rpx;
	}

	.equal-division-item {
		padding: 10rpx 0;
	}

	.group_6 {
		flex: 1 1 336rpx;
	}

	.font_3 {
		font-size: 52rpx;
		font-family: PingFang SC;
		line-height: 38rpx;
		font-weight: 700;
		color: #222222;
	}

	.group_7 {
		flex: 1 1 336rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.grid {
		height: 479rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 21rpx;
		column-gap: 21rpx;
	}

	.grid-item {
		padding: 34rpx 27rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-x-11>view:not(:first-child),
	.space-x-11>text:not(:first-child),
	.space-x-11>image:not(:first-child) {
		margin-left: 11rpx;
	}

	.image_3 {
		width: 32rpx;
		height: 32rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_8 {
		padding: 22rpx 4rpx 0;
		width: 100%;
		height: 35px;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.font_5 {
		font-size: 60rpx;
		font-family: PingFang SC;
		line-height: 45rpx;
		font-weight: 700;
		color: #222222;
	}

	.pos {
		position: absolute;
		left: 4rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #999999;
	}

	.grid-item_2 {
		padding: 34rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_9 {
		line-height: 26rpx;
	}

	.group_9 {
		padding-top: 22rpx;
		width: 100%;
		height: 35px;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.text_10 {
		line-height: 44rpx;
	}

	.pos_2 {
		position: absolute;
		left: 1rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.space-y-36>view:not(:first-child),
	.space-y-36>text:not(:first-child),
	.space-y-36>image:not(:first-child) {
		margin-top: 36rpx;
	}

	.text_11 {
		margin: 2rpx 0 2rpx 10rpx;
	}

	.text_13 {
		line-height: 44rpx;
	}

	.grid-item_3 {
		padding: 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-34>view:not(:first-child),
	.space-y-34>text:not(:first-child),
	.space-y-34>image:not(:first-child) {
		margin-top: 34rpx;
	}

	.group_10 {
		padding: 0 6rpx;
	}

	.space-x-9>view:not(:first-child),
	.space-x-9>text:not(:first-child),
	.space-x-9>image:not(:first-child) {
		margin-left: 9rpx;
	}

	.text_12 {
		line-height: 26rpx;
	}

	.section_7 {
		padding: 39rpx 0 60rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-31>view:not(:first-child),
	.space-y-31>text:not(:first-child),
	.space-y-31>image:not(:first-child) {
		margin-top: 31rpx;
	}

	.font_7 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_14 {
		margin-left: 24rpx;
	}

	.equal-division-item_2 {
		flex: 1 1 172rpx;
		padding: 10rpx 0;
		width: 172rpx;
	}

	.image_4 {
		width: 48rpx;
		height: 48rpx;
	}

	.group_11 {
		margin-top: 60rpx;
	}

	.text_15 {
		margin-left: 29rpx;
	}

	.grid_2 {
		margin-top: 24rpx;
		height: 268rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.grid-item_4 {
		padding: 24rpx 0;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 16rpx;
	}

	.text_16 {
		margin-left: 30rpx;
		margin-top: 40rpx;
	}

	.equal-division_2 {
		margin-top: 38rpx;
	}

	.group_12 {
		flex: 1 1 172.5rpx;
	}

	.group_13 {
		flex: 1 1 172.5rpx;
	}

	.group_14 {
		flex: 1 1 172.5rpx;
	}

	.group_15 {
		flex: 1 1 172.5rpx;
	}

	.space-y-18>view:not(:first-child),
	.space-y-18>text:not(:first-child),
	.space-y-18>image:not(:first-child) {
		margin-top: 18rpx;
	}

	.group_16 {
		margin-top: 52rpx;
	}

	.space-y-35>view:not(:first-child),
	.space-y-35>text:not(:first-child),
	.space-y-35>image:not(:first-child) {
		margin-top: 35rpx;
	}

	.text_17 {
		margin-left: 29rpx;
	}

	.equal-division-item_3 {
		flex: 1 1 172.5rpx;
		padding: 8rpx 0 12rpx;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 12rpx;
	}

	.image_5 {
		width: 64rpx;
		height: 64rpx;
	}

	.image_6 {
		border-radius: 4rpx;
		width: 64rpx;
		height: 64rpx;
	}
</style>
